<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>和其它模板引擎的性能比较</title>

<script type="text/javascript" src="../src/stemplate.js"></script>
<script type="text/javascript" src="third/art-template-4.13.1.js"></script>
<script type="text/javascript" src="third/juicer-min-0.6.15.js"></script>
<script type="text/javascript" src="third/doT.min-1.1.2.js"></script>
<script type="text/javascript" src="third/laytpl-1.2.0.js"></script>
</head>

<body>
<div id="result"></div>

<!-- 输出结果 -->
<script type="text/html" id='resultTmpl'>
  <table cellspacing="10">
  <thead>
    <tr>
      <th>名称</th>
      <th>速度</th>
      <th>比率</th>
      <th>结果</th>
    </tr>
  </thead>
  <tbody>
    for (var k in st) {
      <tr>
        <td>{{ st[k].name }}</td>
        <td>{{ st[k].t }}ms</td>
        <td style='text-align:right;'>{{ Math.round((st[k].t / st[0].t)*100)/100 }}</td>
        <td><div style="width: 300px;height: 100px;overflow: auto;">{{ st[k].result }}</div></td>
      </tr>
    }
  </tbody>
  </table>
</script>

<!-- sTemplate模板，和上面模板功能相同 -->
<script type="text/html" id='sTmpl'>
  for (var i in st.children) {
    var item1 = st.children[i];
    <h2 class="title">{{ item1.menuname }}</h2>
    <div class="item">
      for (var j in item1.children) {
        var item2 = item1.children[j];
        <dl>
          <dt>{{ item2.menuname }}</dt>
          <dd>
            <ul>
              for (var k in item2.children) {
                var item3 = item2.children[k];
                <li>
                  <a href="javascript:;" onclick="console.log('{{item3.menuid}}','{{item3.menuname}}', '{{item3.resurl}}')">{{item3.menuname}}</a>
                </li>
              }
            </ul>
          </dd>
        </dl>
      }
    </div>
  }
</script>

<script id="doTmpl" type="text/x-dot-template">
  {{ for (var i in it.children) { }}
    {{ var item1 = it.children[i]; }}
    <h2 class="title">{{= item1.menuname }}</h2>
    <div class="item">
      {{ for (var j in item1.children) { }}
        {{ var item2 = item1.children[j]; }}
        <dl>
          <dt>{{= item2.menuname }}</dt>
          <dd>
            <ul>
              {{ for (var k in item2.children) { }}
                {{ var item3 = item2.children[k]; }}
                <li>
                  <a href="javascript:;" onclick="console.log('{{= item3.menuid}}','{{= item3.menuname}}', '{{= item3.resurl}}')">{{= item3.menuname}}</a>
                </li>
              {{ } }}
            </ul>
          </dd>
        </dl>
      {{ } }}
    </div>
  {{ } }}
</script>

<!-- art-template模板 -->
<script type="text/html" id='artTmpl'>
  {{each children item1 idx1}}
    <h2 class="title">{{ item1.menuname }}</h2>
    <div class="item">
      {{each item1.children item2 idx2}}
        <dl>
          <dt>{{ item2.menuname }}</dt>
          <dd>
            <ul>
              {{each item2.children item3 idx3}}
                <li>
                  <a href="javascript:;" onclick="console.log('{{item3.menuid}}','{{item3.menuname}}', '{{item3.resurl}}')">{{item3.menuname}}</a>
                </li>
              {{/each}}
            </ul>
          </dd>
        </dl>
      {{/each}}
    </div>
  {{/each}}
</script>

<!-- Juicer模板 -->
<script type="text/template" id='juicerTmpl'>
  {@each children as item1}
    <h2 class="title">${ item1.menuname }</h2>
    <div class="item">
      {@each item1.children as item2}
        <dl>
          <dt>${ item2.menuname }</dt>
          <dd>
            <ul>
              {@each item2.children as item3}
                <li>
                  <a href="javascript:;" onclick="console.log('${item3.menuid}','${item3.menuname}', '${item3.resurl}')">${item3.menuname}</a>
                </li>
              {@/each}
            </ul>
          </dd>
        </dl>
      {@/each}
    </div>
  {@/each}
</script>

<!-- laytpl模板 -->
<script type="text/html" id='layTmpl'>
  {{# for(var k1 in d.children) { var item1=d.children[k1]; }}
    <h2 class="title">{{ item1.menuname }}</h2>
    <div class="item">
      {{# for(var k2 in item1.children) { var item2=item1.children[k2]; }}
        <dl>
          <dt>{{ item2.menuname }}</dt>
          <dd>
            <ul>
              {{# for(var k3 in item2.children) { var item3=item2.children[k3]; }}
                <li>
                  <a href="javascript:;" onclick="console.log('{{item3.menuid}}','{{item3.menuname}}', '{{item3.resurl}}')">{{item3.menuname}}</a>
                </li>
              {{# } }}
            </ul>
          </dd>
        </dl>
      {{# } }}
    </div>
  {{# } }}
</script>

<script>

//生成max个随机数据
var max=10000;
var style = 'render'; //render compile
var data = [];
var max2 = ('render' == style) ? max : 1;
for(var t=0; t<max2; ++t) {
	var d = {children:[]};
	for (var i=rand(3,5); i>0; --i) {
		var n1 = {menuid:''+i, menuname:'level'+i, resurl:'', children:[]};
		d.children.push(n1);
		for (var j=rand(5,7); j>0; --j) {
			var n2 = {menuid:n1.menuid+'_'+j, menuname:n1.menuname+'_'+j, resurl:'', children:[]};
			n1.children.push(n2);
			for (var k=rand(5,15); k>0; --k) {
				var n3 = {menuid:n2.menuid+'_'+k, menuname:n2.menuname+'_'+k, resurl:''};
				n2.children.push(n3);
			}
		}
	}
	data.push(d);
}

var html;
var ret = [];

//stemplate渲染
var t = new Date().getTime();
//var compiled_tpl = sTemplate.compileTmpl('sTmpl');
var tpl = document.getElementById('sTmpl').innerHTML;
var compiled_tpl = sTemplate.compile(tpl);
for(var i=0; i<max; ++i) {
  if ('render' == style) {
    html = compiled_tpl(data[i]);
  } else {
    compiled_tpl = sTemplate.compile(tpl);
    html = '';
  }
}
ret.push({name: 'sTemplate', t: new Date().getTime() - t, result:html});
sTemplate.renderTmplTo('resultTmpl', ret, 'result');

//doT渲染
t = new Date().getTime();
var tpl = document.getElementById('doTmpl').innerHTML;
compiled_tpl = doT.template(tpl);
for(var i=0; i<max; ++i) {
  if ('render' == style) {
    html = compiled_tpl(data[i]);
  } else {
    compiled_tpl = doT.template(tpl);
    html = '';
  }
}
ret.push({name: 'doT', t: new Date().getTime() - t, result:html});
sTemplate.renderTmplTo('resultTmpl', ret, 'result');

//art-template渲染
t = new Date().getTime();
tpl = document.getElementById('artTmpl').innerHTML;
compiled_tpl = template.compile(tpl);
for(var i=0; i<max; ++i) {
  if ('render' == style) {
    html = compiled_tpl(data[i]);
  } else {
    compiled_tpl = template.compile(tpl);
    html = '';
  }
}
ret.push({name: 'art-template', t: new Date().getTime() - t, result:html});
sTemplate.renderTmplTo('resultTmpl', ret, 'result');

//layTmpl渲染
t = new Date().getTime();
tpl = document.getElementById('layTmpl').innerHTML;
for(var i=0; i<max; ++i) {
  if ('render' == style) {
    html = laytpl(tpl).render(data[i]);
  } else {
    html = laytpl(tpl).parse(tpl, data[0]);
    html = '';
  }
}
ret.push({name: 'laytpl', t: new Date().getTime() - t, result:html});
sTemplate.renderTmplTo('resultTmpl', ret, 'result');

//juicer渲染
t = new Date().getTime();
tpl = document.getElementById('juicerTmpl').innerHTML;
compiled_tpl = juicer(tpl);
for(var i=0; i<max; ++i) {
  if ('render' == style) {
    html = compiled_tpl.render(data[i]);
  } else {
    compiled_tpl = juicer(tpl);
    html = '';
  }
}
ret.push({name: 'Juicer', t: new Date().getTime() - t, result:html});
sTemplate.renderTmplTo('resultTmpl', ret, 'result');

//随机数函数
function rand(from, to) {
	return from+Math.round(Math.random()*(to - from));
}
</script>
</body>
</html>
